<div class="dbcontain _bg_dark _text_barely">
    <div class="m0auto">
        <div class="topheader">
            <span class="menu fs-lg tran3 fl pc15 tc fa fa-navicon"></span>
            <a href="/wap.php?m=home"><span class="logo pull-left pc35 imgcontain" style="background-image:url('./static/img/logo.png')"></span></a>
            <span class="search pull-right tr pc50 ">
                <i class="fa fa-search"></i> <span class="searchbtn"> 搜 索</span>
            </span>
        </div>

            <div class="searchinput tran3">
                <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <div class="input-group">
                  <input id="keyword" type="text" class="form-control" placeholder="请填写关键字">
                  <span class="input-group-btn">
                    <button id="gosearch" class="btn btn-info" style="background:#3949ab;border-color:#3949ab;" type="button">确 定</button>
                  </span>
                </div><!-- /input-group -->
            </div>

    </div>
</div>

<div class="line1" style="background-color:#666;"></div>
<div class="clearfix"></div>
<div class="nav dbcontain _bg_dark _text_barely" style="display:none;">
    <div class="limit-width m0auto">
        <div class="navheader">
            <ul class="clearfix">
                <li class="navitem  tran3 lh3  <?php echo ($route == 'home')?' active ':''; ?> "> <a class="db" href="./wap.php?m=home"> 首页 <span class="fr fa fa-arrow-right"></span></a></li>
                <li class="navitem  tran3 lh3  <?php echo ($route == 'service')?' active ':''; ?>  "> <a class="db"  href="./wap.php?m=service"> 我们的服务 <span class="fr fa fa-arrow-right"></span></a></li>
                <li class="navitem  tran3 lh3  <?php echo ($route == 'case')?' active ':''; ?>  "> <a class="db"  href="./wap.php?m=case"> 我们的案例 <span class="fr fa fa-arrow-right"></span></a></li>
                <li class="navitem  tran3 lh3  <?php echo ($route == 'about')?' active ':''; ?>  "> <a class="db"  href="./wap.php?m=about"> 关于我们 <span class="fr fa fa-arrow-right"></span></a></li>
                <li class="navitem  tran3 lh3  <?php echo ($route == 'join')?' active ':''; ?>  "> <a class="db"  href="./wap.php?m=join"> 加入我们 <span class="fr fa fa-arrow-right"></span></a></li>
                <li class="navitem  tran3 lh3  <?php echo ($route == 'contact')?' active ':''; ?>  "> <a class="db"  href="./wap.php?m=contact"> 联系我们 <span class="fr fa fa-arrow-right"></span></a></li>
                <li class="navitem  tran3 lh3  <?php echo ($route == 'contact')?' active ':''; ?>  "> <a class="db"  href="./wap.php?m=login"> 资料查询 <span class="fr fa fa-arrow-right"></span></a></li>
            </ul>
            <div class="borderline">
                <span class="activeline dib tran5"></span>
            </div>
        </div>
    </div>
</div>
<style type="text/css">
    .topheader{
        position: relative;
        height:50px;
        line-height:50px;
    }
    .topheader .menu{
        line-height: 50px;
    }

    .topheader .logo{
        height:48px;
        margin-top:1px;
        background-position: 10% 50%;
    }

    .topheader .search{
        padding-right:20px;
        cursor: pointer;
    }

    .topheader .searchbtn{
        padding: 0 20px;
        margin-left: 20px;
        border-left: 1px solid #666;
    }

    .searchinput {
        position: fixed;
        z-index: 2;
        right:0px;
        top:65px;
        width:200px;
        opacity: 0;
    }

    .searchinput.active{
        right:20px;
        opacity: 1;

    }

    .searchinput .close{
        margin-top:-20px;
    }

    .navheader{
        position:relative;
    }
    
   .navheader  .navitem{
        /*margin-right:15px;*/
        padding:0 20px;
        border-right:1px solid #666;

    }
    .navheader .navitem  span{
        line-height: 48px;
        font-size: 80%;
    }
   .navheader  .navitem:last-child{

        border-right:none;
        
    }
    .navheader  .navitem:hover{
        background:#333;
        color:#999;
    }

    .navheader  .navitem.active{
        background:#000;
        color:#eee;
        border-bottom:1px solid #1e88e5;
    }

    .navheader .borderline{
        height:3px;
    }
    .navheader .borderline .activeline{
        position: absolute;
        width:0px;
        height:3px;
        background-color:#1e88e5;
        /*box-shadow:0 0 2px #ccc; */

    }
</style>

<script type="text/javascript">

$(document).ready(function(){
    
        // initNavitem();
        initMainheight();


        // $('.navitem').hover(
        //     function(){

        //         var activeline = $('.navheader .borderline .activeline');
        //         var width = $(this).innerWidth();
        //         var left = $(this).position().left;
        //         activeline.css({"left":left+'px',"width":width+'px'});

        //     },
        //     function(){
        //         initNavitem();
        //     }

        // )
        // 
        
        $('.menu').on('click',function(){

            var nav = $('.nav');
            var that = $(this);

            if(nav.css('display')=='none'){

                nav.slideDown(200);
                that.removeClass('fa-navicon').addClass('fa-close');
            }else{
                nav.slideUp(200);
                that.removeClass('fa-close').addClass('fa-navicon');
            }
        })


        $('.navitem').on('click',function(){

            $('.navitem').removeClass('active');
            $(this).addClass('active');
        })

        $('.search').on('click',function(){

            var searchinput = $('.searchinput');

            if(searchinput.hasClass('active')){
                searchinput.removeClass('active');

            }else{
                 searchinput.addClass('active');
            }

        })

        $('.searchinput .close').on('click',function(){

            $('.searchinput').removeClass('active');

        })


        $('#gosearch').on('click',function(){

            var keyword = $.trim($('#keyword').val());

            if(keyword.length==0)return;
            window.location.href = 'wap.php?m=search&k='+keyword;

        })
})



function initNavitem(){

    if($('.navheader  .navitem.active').length == 0 ) return;

    var activeline = $('.navheader .borderline .activeline');

    var activenavitem = $('.navheader  .navitem.active');

    var width = activenavitem.innerWidth();
    var left = activenavitem.position().left;
    activeline.css({"left":left+'px',"width":width+'px'});
}

function initMainheight(){
    var wheight = $(window).height();
    var bheight = $('body').height();
    var theight = $('.topheader').height();
    var nheight = $('.navheader').height();
    var mheight = $('#main').height();
    var fheight = $('.footer').height();
    var h = wheight - bheight;
    if(h>0){
        $('#main').height(h+mheight);
    }

}
</script>
